<template>
  <div class="clients">
    <search @search="handleSearch" @reset="handleReset">
      <SearchInput searchText="Client Name">
        <a-input v-model:value="clientName" />
      </SearchInput>
    </search>
    <e-container class="container" style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        >
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
        <div v-if="total > 0" class="pagination">
          <a-pagination
            v-model:current="current"
            v-model:pageSize="pageSize"
            :total="total"
            show-less-items
            :show-size-changer="false"
            @change="changeSize"
          />
        </div>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import { column } from './column.js'
import clients from '@/api/clients.js'

const columns = reactive(column)
const clientName = ref()
const data = ref([])
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

/**
 * 获取列表数据
 */
const getList = async () => {
  loading.value = true
  const res = await clients.getClients({
    clientName: clientName.value,
    page: {
      pageRows: pageSize.value,
      pageIndex: current.value,
      total: 0,
      sort: '',
      order: ''
    }
  })
  if (res.code === 2000) {
    total.value = res.total
    data.value = res.data
  }

  setTimeout(() => {
    loading.value = false
  }, 30)
}
/**
 * 修改页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 重置
 */
const handleReset = () => {
  clientName.value = ''
  handleSearch()
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: Clients
path: /clients/
</route>
